<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据开发工具</title>
    <link href="../../skins/plugins/font-awesome/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../skins/plugins/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="../../skins/develop/css/index.css">
    <link rel="stylesheet" href="../../skins/plugins/layui/css/layui.css">

    <link rel="stylesheet" href="../../skins/plugins/sql/codemirror/lib/codemirror.css"/>
    <link rel="stylesheet" href="../../skins/plugins/sql/codemirror/addon/hint/show-hint.css"/>
    <link rel="stylesheet" href="../../skins/plugins/sql/datatables/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="../../skins/plugins/sql/datatables/extensions/buttons/buttons.dataTables.min.css"/>
    <script src="../../skins/plugins/sql/js/jszip.min.js"></script>
    <script src="../../skins/plugins/sql/codemirror/lib/codemirror.js"></script>
    <script src="../../skins/plugins/sql/codemirror/addon/hint/show-hint.js"></script>
    <script src="../../skins/plugins/sql/codemirror/addon/hint/sql-hint.js"></script>
    <script src="../../skins/plugins/sql/codemirror/mode/sql/sql.js"></script>
    <script src="../../skins/plugins/sql/js/jquery-2.2.0.min.js"></script>
    <script src="../../skins/plugins/sql/datatables/js/jquery.dataTables.min.js"></script>
    <script src="../../skins/plugins/sql/datatables/extensions/buttons/dataTables.buttons.min.js"></script>
    <script src="../../skins/plugins/sql/datatables/extensions/buttons/buttons.html5.min.js"></script>
    <script src="../../skins/plugins/sql/datatables/extensions/buttons/buttons.flash.min.js"></script>
    <script src="../../skins/plugins/layui/layui.all.js"></script>
</head>
<style>
    .layui-header {
        width: 100%;
        line-height: 50px;
        background: #081a3c;
        box-shadow: 3px 3px 8px #081a3c;
        position: fixed;
        z-index: 999;
    }
    .layui-layout-admin .layui-header {
        background-color: #081a3c;
    }
    .layui-header .layui-nav .layui-nav-item-active{
        border-bottom: 5px solid #0cc1f1;
        background-color: #0d3b6b;
    }

    .layui-skin-balck .layui-side {
        background-color: #081a3c!important;
    }
    .nav > li.active {
        border-left: 4px solid #3e75bf;
        background: #0c3561;
    }
    .nav > li > a:hover {
        background-color: #3eb57f !important;
    }
    .select {
        background-color: #3e75bf;
    }

    .CodeMirror {
        width: 100%;
        /*border: 1px solid black;*/
    }
    div::-webkit-scrollbar-track {
        background-color: #F5F5F5;
    }
    div::-webkit-scrollbar {
        width: 6px;
        background-color: #F5F5F5;
    }
    div::-webkit-scrollbar-thumb {
        background-color: #999;
    }
    .layui-table[lay-data] {
        display: block !important;
    }
    .CodeMirror-gtters {
        min-height: 1% !important;
    }
</style>
<body class="layui-layout-body fixed-sidebar layui-skin-balck">
<div class="layui-layout layui-layout-admin  " id="box">
    <div class="layui-header">
        <div class="layui-logo">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#" style="color: white">
                <span class="clear">
                    <span class="block m-t-xs" style="font-size:20px;">
                        <i class="fa fa-area-chart"></i>
                        <strong class="font-bold">数据开发工具</strong>
                    </span>
                </span>
            </a>
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 显示/隐藏菜单 -->
            <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i></a></li>
            <li class="layui-nav-item"><a href="index.html">数据开发</a></li>
            <li class="layui-nav-item  layui-nav-item-active"><a href="query.html">自助分析</a></li>
            <li class="layui-nav-item"><a href="stream.html">流式计算</a></li>
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="">运维管理<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">测试用户</a>
                <dl class="layui-nav-child" style="text-align: center">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
            </li>
        </ul>
    </div>
    <div class="layui-side" id="top" >
        <div class="layui-tab">
            <div class="layui-tab-content " style="padding: 0px;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-side-scroll sidebar-collapse">
                        <ul class="layui-nav layui-nav-tree" lay-filter="test">
                            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入任务名称查询" class="layui-input" style="width: 200px;margin: 0px">
                        </ul>
                    </div>
                </div>
                <div class="layui-tab-item" id="fltre1e">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-body" id="bottom">
        <!-- 内容主体区域 -->
        <div class="layui-row layui-col-space5" style="min-height: 406px">
            <div class="layui-col-sm6 layui-col-md9">
                <div class="layui-card" style="margin-top: 5px;">
                    <div class="layui-card-body" style="padding: 0px;">
                        <div class="layui-tab" id="subJobTab" lay-allowclose="true" lay-filter="subJobTab">
                            <ul class="layui-tab-title" id="subJobTabtitle" ondblclick="newSubJob()">
                                <div class="layui-btn-group" style="float: right;margin-top: 5px;">
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="run_tab()"><i class="fa fa-play"></i></button>
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="pause_sql()"><i class="fa fa-pause"></i></button>
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="new_paragraph()"><i class="fa fa-sticky-note"></i></button>
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="save_paragraph()"><i class="fa fa-save"></i></button>
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="delete_paragraph()"><i class="fa fa-trash"></i></button>
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="toggleSQL" onclick="toggleSQL()"><i class="fa fa-angle-double-up"></i></button>
                                </div>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-card-body" style="padding: 0px;">
                                    <form id="sql-form">
                                        <textarea id="code" name="code" >

                                        </textarea>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card" style="margin-top: 5px;">
                    <div class="layui-card-body" style="padding: 0px;">
                        <div class="layui-tab" style="height: 400px" >
                            <ul class="layui-tab-title">
                                <li class="layui-this" id="run-tab-result">运行结果</li>
                                <li>运行日志</li>
                                <li>运行历史</li>
                                <div class="layui-btn-group" style="float: right;padding: 5px;">
                                    <button type="button" style="float: right;" class="layui-btn layui-btn-sm" data-type="isAll">导出</button>
                                </div>
                                <li>任务属性</li>
                            </ul>
                            <div class="layui-tab-content" style="padding: 0px;">
                                <div class="layui-tab-item " id="data-container" style="text-align: center">暂无数据！</div>
                                <div class="layui-tab-item " id="data-error" style="text-align: center">暂无数据，请先运行任务!</div>
                                <div class="layui-tab-item"  id="data-history" style="text-align: center" >暂无数据，请先运行任务!</div>
                                <div class="layui-tab-item " id="job-proper" >
                                    <div  style="margin-top: 20px;">
                                    </div>
                                    <form class="layui-form" action="" id="job-properlist">
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">任务名称</label>
                                                <div class="layui-input-inline">
                                                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">验证邮箱</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <div class="layui-input-block">
                                                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">保存</button>
                                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card no-space" style="margin: 0px;">
                    <div class="layui-card-header">数据资源</div>
                    <div class="layui-card-body" style="padding: 0px 15px;">
                        <form class="layui-form" action="">
                            <select name="modules" lay-verify="required" lay-search="">
                                <option value="">请选择数据源</option>
                                <option value="1" selected>10.106.1.190-原始库</option>
                                <option value="2">资源库</option>
                                <option value="3">主题库</option>
                            </select>
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入数据资源名称查询" class="layui-input" >
                        </form>
                        <div id="dataTree" style="height: 638px;overflow-y: scroll;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 选项卡和内容区 -->
    <div class="layui-tab" lay-filter="home-tabs" lay-allowclose="true" style="margin: 0 0 0 200px;">
        <ul class="layui-tab-title"></ul>
        <ul class="rightmenu" style="display: none;position: absolute;z-index: 9999">
            <li data-type="refresh">刷新</li>
            <li data-type="closeOthers">关闭其他</li>
            <li data-type="closeRight">关闭右侧所有</li>
            <li data-type="closeAll">关闭所有</li>
        </ul>
        <div class="layui-tab-content">
        </div>
    </div>
    <div id="add-node" class="layui-fluid" style="display: none;">
        <form class="layui-form" id="add-form" action="">
            <input type="text" name="parentId" style="display:none;" class="layui-input">
            <div class="layui-form-item">
                <label class="layui-form-label" id="labeltest" >部门名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" class="layui-input" required="" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addNode">保存</button>
                </div>
            </div>
        </form>
    </div>
    <div id="update-node" class="layui-fluid" style="display: none;">
        <form class="layui-form" id="update-form" action="">
            <input type="text" name="deptId" style="display:none;" class="layui-input">
            <input type="text" name="parentId" style="display:none;" class="layui-input">
            <div class="layui-form-item">
                <label class="layui-form-label">部门名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" class="layui-input" required="" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="updateNode">保存</button>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-footer">
    </div>
</div>
<script src="../../skins/plugins/jquery.min.js?v=2.1.4"></script>
<script src="../../skins/plugins/bootstrap.min.js?v=3.3.6"></script>
<script src="../../skins/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../../skins/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="../../skins/plugins/layer/layer.min.js"></script>
<script src="../../skins/plugins/layui/layui.js"></script>
<script src="../../skins/develop/js/index.js"></script>
<script>
    // 初始化 左侧菜单栏，监听tab 切换，如果切换 调用 刷新编辑框函数
    layui.use('element', function(){
        var element = layui.element;
        //监听导航点击
        element.on('tab(subJobTab)', function(elem){
            console.log(elem)
            var id=$(this).attr("id");
            var zeppelinUrl = $(this).attr("zeppelinUrl");
            var sql = $(this).attr("sql");
            //点击后获取id 更新
            refresh(id,zeppelinUrl,sql);
        });

        var active = {
            //在这里给active绑定几项事件，后面可通过active调用这些事件
            tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('home-tabs', id); //根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete('home-tabs', id); //删除
            },
            tabRefresh: function (id) { //刷新页面
                alert(id);
            }
        };
        //获取所有的菜单
        $.ajax({
            type:"GET",
            url:"/sql/queryGroupJobSql",
            dataType:"json",
            success:function(data){
                //先添加所有的主材单
                var content;
                $.each(data.data,function(i,obj){
                    if(obj.childrenList!=null)//添加子任务  后期改成递归的形式
                    {
                        content='<li class="layui-nav-item">';
                        content+='<a href="javascript:;">'+obj.name+'</a>';
                        content+=loadchild(obj);
                        content+='</li>';
                        CustomRightClick(obj.id);
                    }else
                    {
                        content='<li class="layui-nav-item">';
                        content+='<a href="javascript:queryNoteInfo(\''+obj.id+'\',\''+obj.name+'\',\''+obj.zeppelinUrl+'\')">'+obj.name+'</a>';
                        content+='</li>';
                        CustomRightClick(obj.path);
                    }
                    $(".layui-nav-tree").append(content);
                });

                element.init();
            },
            error:function(jqXHR){
                alert("发生错误："+ jqXHR.status);
            }
        });
        //组装子菜单的方法
        function loadchild(obj){
            if(obj==null){
                return;
            }
            var content='';
            if(obj.childrenList!=null && obj.childrenList.length>0){
                content+='<dl class="layui-nav-child">';
            }else{
                content+='<dl>';
            }
            if(obj.childrenList!=null && obj.childrenList.length>0){
                $.each(obj.childrenList,function(i,note){
                    content+='<dd>';
                    content+='<a href="javascript:queryNoteInfo(\''+note.id+'\')">'+note.name+'</a>';
                    if(note.childrenList==null){
                        return;
                    }
                    content+=loadchild(note);
                    content+='</dd>';
                });
                content+='</dl>';
            }
            //console.log(content);
            return content;
        }
    });
    /*
     /  更新tab 切换以后编辑框里的内容
     */
    function refresh(id,zeppelinUrl,sql){
        if(typeof(sql) =="undefined")
        {
            sql="";
        }
        window.editor.getDoc().setValue(sql);
        window.editor.refresh();
    }

    function  queryNoteInfo(id,name,zeppelinUrl) {
        $.ajax({
            type: "GET",
            url:"/sql/querySubGroupJobSql",
            dataType:"json",
            data: {
                "id": id,
                "name": name
            },
            success: function(data) {
                //删除原有tab 页面
                $('#subJobTabtitle li').remove();
                if(data.status == "200") {
                    //将重新修改后的名称加载到树结构上
                    //取title  还有 text  如过是新建的 那么是没有的
                    var notebookid = data.data.id;
                    $.each(data.data.paragraphs,function(i,obj){
                        var id= obj.id;
                        var title = obj.title;
                        var text = obj.text;
                        if(typeof(text)=="undefined")
                        {
                            text =" ";
                        }
                        if(typeof(title) =="undefined")
                        {
                            title=id;
                        }
                        var tab ;
                        if(i==0)
                        {
                            window.editor.getDoc().setValue(text);
                            window.editor.refresh();
                            tab = $('<li class="active layui-this" id="'+id+'" zeppelinUrl="'+zeppelinUrl+'" sql=\''+text+'\' notebookid="'+notebookid+'">'+title+'</li>');
                        }else {
                            tab = $('<li class="active" id="'+id+'" zeppelinUrl="'+zeppelinUrl+'" sql=\''+text+'\' notebookid="'+notebookid+'">'+title+'</li>');
                        }
                        $("#subJobTabtitle").append(tab);
                        layui.use('element', function(){
                            var element = layui.element;
                            element.render('tab');
                        });
                    });
                }else{
                    $.dialog({
                        type: "confirm",
                        content: L.getLocaleMessage("updateNamemessage","修改任务名称失败"),
                        autofocus: true,
                        ok: function() {
                        }
                    });
                }
            }
        });
    }

    function newSubJob() {
        alert("增加")
    }

    layui.use(['element', 'layer'], function(){
        var element = layui.element;
        var layer = layui.layer;
        //监听折叠
        element.on('collapse(test)', function(data){
            layer.msg('展开状态：'+ data.show);
        });
    });
    layui.use('tree', function(){
        var data = [
            {
                title:"常住人口信息",
                id:"1",
                children:[
                    {title:"信息主键编号"},
                    {title:"人员编号"},
                    {title:"姓名"},
                    {title:"姓名汉语拼音"},
                    {title:"外文姓"},
                    {title:"外文名"},
                    {title:"曾用名"},
                    {title:"曾用名汉语拼音"},


                ]
            },
            {title:"常住人口注销信息",children:[

                {title:"信息主键编号"},
                {title:"人员编号"},
                {title:"姓名"},
                {title:"姓名汉语拼音"},
                {title:"外文姓"},


            ]},
            {title:"爆炸事故信息",children:[

                {title:"信息主键编号"},
                {title:"人员编号"},
                {title:"姓名"},
                {title:"姓名汉语拼音"},


            ]},
            {title:"涉爆案件收缴捡拾登记信息",children:[

                {title:"信息主键编号"},
                {title:"人员编号"},
                {title:"姓名"},
                {title:"姓名汉语拼音"},
                {title:"外文姓"},
                {title:"外文名"},
                {title:"曾用名"},
                {title:"曾用名汉语拼音"},
                {title:"别名/绰号"},
                {title:"别名/绰号汉语拼音"},
                {title:"性别代码"},
                {title:"出生日期"},
                {title:"身份证"},
                {title:"常用证件代码"},
                {title:"证件号码"},
                {title:"身高"},
                {title:"血型代码"}

            ]},
            {title:"涉爆案件的信息",children:[

                {title:"信息主键编号"},
                {title:"人员编号"},
                {title:"姓名"},
                {title:"姓名汉语拼音"},
                {title:"外文姓"},
                {title:"外文名"},
                {title:"曾用名"},
                {title:"曾用名汉语拼音"},
                {title:"别名/绰号"},
                {title:"别名/绰号汉语拼音"},
                {title:"性别代码"},
                {title:"出生日期"},
                {title:"身份证"},
                {title:"常用证件代码"},
                {title:"证件号码"},
                {title:"身高"},
                {title:"血型代码"}

            ]},
            {title:"涉爆案件单位信息",children:[
                {title:"信息主键编号"},
                {title:"人员编号"},
                {title:"姓名"},
                {title:"姓名汉语拼音"},
                {title:"外文姓"},
                {title:"外文名"},
                {title:"曾用名"},
                {title:"曾用名汉语拼音"},
                {title:"别名/绰号"},
                {title:"别名/绰号汉语拼音"},
                {title:"性别代码"},
                {title:"出生日期"},
                {title:"身份证"},
                {title:"常用证件代码"},
                {title:"证件号码"},
                {title:"身高"},
                {title:"血型代码"}

            ]},
            {title:"涉爆案件人员信息",children:[
                {title:"信息主键编号"},
                {title:"人员编号"},
                {title:"姓名"},
                {title:"姓名汉语拼音"},
                {title:"外文姓"},
                {title:"外文名"},
                {title:"曾用名"},
                {title:"曾用名汉语拼音"},
                {title:"别名/绰号"},
                {title:"别名/绰号汉语拼音"},
                {title:"性别代码"},
                {title:"出生日期"},
                {title:"身份证"},
                {title:"常用证件代码"},
                {title:"证件号码"},
                {title:"身高"},
                {title:"血型代码"}

            ]},
            {title:"涉爆物品地面站储存品种数量表"},
            {title:"涉爆物品购买证信息"},
            {title:"涉爆物品购买证物品信息"},
            {title:"涉爆物品运输证信息"},
            {title:"境外旅客住宿信息"}
        ];
        var tree = layui.tree;
        tree.render({
            elem: '#dataTree'
            ,data: data
            ,accordion: true
            ,edit: ['add', 'update', 'del']
            ,operate: function (obj) {
                var type = obj.type; //得到操作类型：add、edit、del
                var data = obj.data; //得到当前节点的数据
                var elem = obj.elem; //得到当前节点元素
                //Ajax 操作
                var id = data.id; //得到节点索引
                if (type === 'add') { //增加节点
                    $("#NodeID").val(id);
                    alert(id);
                    index0pen = layer.open({
                        type: 1,
                        title: "新增",
                        area: ['500px', '200px'],
                        content: $("#add-node"),

                    });

                } else if (type === 'update') { //修改节点
                    //console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
                    $("#nodeId").val(id);
                    $("#Title").val(data.title);
                    index0pen = layer.open({
                        type: 1,
                        title: "编辑",
                        area: ['500px', '200px'],
                        content: $("#update-node"),

                    });
                } else if (type === 'del') { //删除节点
                    $.ajax({
                        url: '/Home/DelNode',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            nodeid: id
                        },
                        success: function (r) {
                            if (r > 0) {
                                layer.msg('删除成功', { icon: 6 });
                            } else {
                                layer.msg('删除失败', { icon: 5 });
                            }
                        },
                        error: function (s) {
                            layer.msg('删除出错了');
                        }
                    });
                };
            }
            ,click: function(obj){
                layer.msg(JSON.stringify(obj.data));
                window.editor.getDoc().setValue("select * from new table;");
                window.editor.refresh();
            }
        });
    });


    function fake_post(url, data, callback){
        // This structure is not specific to DataTable and is just the structure my server is returning.
        var response = {
            'type': 'table',
            'header': ['id', 'name'],
            'columns': [{'title': 'ID'}, {'title': 'Name'}],
            'data': [
                ['1', 'Homer Simpson'],
                ['2', 'Bart Simpson'],
                ['3', 'Lisa Simpson'],
                ['4', 'Ned Flanders'],
                ['5', 'Planet Earth']
            ]
        }
        callback(response);
    }
    function toggleSQL(){
        $("#sql-form").toggle();
        var dom = document.getElementById("toggleSQL");
        $(dom).children("i").css("fa fa-angle-double-down");
        if($(dom).children("i").hasClass("fa-angle-double-down")){

            $(dom).children("i").removeClass("fa-angle-double-down").addClass("fa fa-angle-double-up");
        }else {
            $(dom).children("i").removeClass("fa-angle-double-up").addClass("fa fa-angle-double-down");
        }
    }

    function save_sql(){
        var activetab = $("#subJobTabtitle .layui-this");
        var paragraphsid = activetab.attr("id");
        var notebookid = activetab.attr("notebookid");
        var text = window.editor.getValue();

        if(typeof(paragraphsid) == "undefined")
        {
            alert("请选择相应的子任务");
        }else //运行对应的接口并返回
        {
            $.ajax({
                type: "POST",
                url: "/sql/saveSql",
                dataType: "json",
                contentType: 'application/json',
                data: JSON.stringify({
                    "paragraphsid":paragraphsid,
                    "notebookid":notebookid,
                    "text":text
                }),
                success: function (data) {
                    if(data.data.returnuStatus == "error")
                    {
                        alert(data.data.returnMessage);
                    }else
                    {
                        alert("保存成功");
                    }
                }
            });

        }
    }

    function run_tab(){
        var activetab = $("#subJobTabtitle .layui-this");
        var paragraphsid = activetab.attr("id");
        var notebookid = activetab.attr("notebookid");
        if(typeof(paragraphsid) == "undefined")
        {
            alert("请选择相应的子任务");
        }else //运行对应的接口并返回
        {
            $.ajax({
                type: "POST",
                url: "/sql/runSql",
                dataType: "json",
                contentType: 'application/json',
                data: JSON.stringify({
                    "paragraphsid":paragraphsid,
                    "notebookid":notebookid,
                    "type":"id"
                }),
                success: function (data) {
                    if(data.data.returntype == 'text')
                    {
                        $("#data-container").html(data.data.data);
                        $("#run-tab-result").trigger("click");
                    }else if (data.data.returntype == 'table')
                    {
                        //先写表
                        $("#data-container").html('<table id="demo" lay-filter="userFilter" ></table>');
                        layui.use('table', function(){
                            var table = layui.table;
                            table.init('userFilter',{//转换成静态表格
                                 cols:[data.data.columndata]
                                ,data:data.data.data
                                ,limit:10
                            });
                            fake_post("editor/run-sql", {'data': sql}, function(result){
                                toggleSQL();
                            });
                        });
                        $("#run-tab-result").trigger("click");
                    }else if (data.data.returntype == 'error')
                    {
                        $("#data-container").html("错误信息为:"+data.data.data);
                        $("#run-tab-result").trigger("click");
                    }
                }
            });

        }
    }

    function run_sql(){
        $('#data-container').show();
        $('#data-error').removeClass("layui-show");
        var sql = window.editor.getValue();
        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#demo'
                ,url: '/sql/runSql'
                ,where:{sql:sql,type:'sql'}
                ,method:'post'
                ,contentType: 'application/json'
                ,page: true //开启分页
                ,cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,height: 500
                ,cols: [[
                    { type:'numbers',align:'center', width:60,title:'序号'}
                    ,{field:'access',  title: '字段名称',align:'center',width:'18%'}
                ]],
                done:function (res,page,count) {
                    var myData=new Array();
                    myData = res.data.columndata;
                    table.init('userFilter',{//转换成静态表格
                        cols:[myData]
                        ,data:res.data.data
                        ,limit:10
                    });
                    fake_post("editor/run-sql", {'data': sql}, function(result){
                        toggleSQL();
                    });
                }
            });
        });
    }

    var AUTOCOMPLETE_TABLES = {
        'hello': ['world', 'neighbor', 'there'],
        'reply': ['rumble', 'hellodley', 'hi_there']
    }

    window.onload = function() {
        window.editor = CodeMirror.fromTextArea(document.getElementById('code'), {
            mode: 'text/x-mysql',
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            matchBrackets : true,
            autofocus: true,
            extraKeys: {"Ctrl-Space": "autocomplete"}
        });
        window.editor.setSize('auto','auto');
        CodeMirror.commands.autocomplete = function(cm) {
            CodeMirror.showHint(cm, CodeMirror.hint.sql, {
                tables: AUTOCOMPLETE_TABLES
            });
        }
    };



    function CustomRightClick(id) {
        //取消右键  rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
        $('.layui-tab-title li').on('contextmenu', function () {
            return false;
        })
        $('.layui-tab-title,.layui-tab-title li').click(function () {
            $('.rightmenu').hide();
        });
        //单击取消右键菜单
        $('body,#aaa').click(function () {
            $('.rightmenu').hide();
        });
        //tab点击右键
        $('.layui-nav-tree li').on('contextmenu', function (e) {
            debugger;
            var popupmenu = $(".rightmenu");
            popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性

            //判断右侧菜单的位置
            l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
            t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
            popupmenu.css({
                left: l,
                top: t
            }).show(); //进行绝对定位
            return false;
        });
    }

    $(".rightmenu li").click(function () {
        //当前的tabId
        var currentTabId = $(this).attr("data-id");

        if ($(this).attr("data-type") == "closeOthers") { //关闭其他
            var tabtitle = $(".layui-tab-title li");
            $.each(tabtitle, function (i) {
                if ($(this).attr("lay-id") != currentTabId) {
                    active.tabDelete($(this).attr("lay-id"))
                }
            })
        } else if ($(this).attr("data-type") == "closeAll") { //关闭全部
            var tabtitle = $(".layui-tab-title li");
            $.each(tabtitle, function (i) {
                active.tabDelete($(this).attr("lay-id"))
            })

        } else if ($(this).attr("data-type") == "refresh") { //刷新页面
            active.tabRefresh($(this).attr("data-id"));

        } else if ($(this).attr("data-type") == "closeRight") { //关闭右边所有
            //找到当前聚焦的li之后的所有li标签 然后遍历
            var tabtitle = $(".layui-tab-title li[lay-id=" + currentTabId + "]~li");
            $.each(tabtitle, function (i) {
                active.tabDelete($(this).attr("lay-id"))
            })
        }

        $('.rightmenu').hide();
    });

</script>
</body>
</html>
